import React from 'react';
import { Link } from 'react-router-dom';
import AdminLayout from '@/components/admin/AdminLayout';
import { useNews } from '@/hooks/useNews';
import { useBanners } from '@/hooks/useBanners';
// import { useServices } from '@/hooks/useServices';
import { useAuth } from '@/hooks/useAuth';
import { cn } from '@/lib/utils';

// 模拟统计数据
const visitorData = [
  { name: '1月', visitors: 450, views: 1200 },
  { name: '2月', visitors: 520, views: 1350 },
  { name: '3月', visitors: 490, views: 1280 },
  { name: '4月', visitors: 680, views: 1800 },
  { name: '5月', visitors: 720, views: 1950 },
  { name: '6月', visitors: 850, views: 2200 },
];

const serviceData = [
  { name: '环境影响评价', value: 35 },
  { name: '污染治理工程', value: 25 },
  { name: '生态环境修复', value: 20 },
  { name: '环境监测检测', value: 15 },
  { name: '其他服务', value: 5 },
];

// 快速访问卡片数据
const quickAccessItems = [
  { title: '轮播图管理', icon: 'fa-images', path: '/admin/banners', count: 3 },
  { title: '新闻管理', icon: 'fa-newspaper', path: '/admin/news', count: 12 },
  { title: '服务管理', icon: 'fa-concierge-bell', path: '/admin/services', count: 6 },
  { title: '公司信息', icon: 'fa-building', path: '/admin/company-info' },
  { title: '联系信息', icon: 'fa-address-book', path: '/admin/contact-info' },
];

export default function Dashboard() {
  const { user } = useAuth();
  const { data: newsData, isLoading: newsLoading } = useNews({ size: 5 });
  const { data: bannersData, isLoading: bannersLoading } = useBanners({ size: 5 });
  // 暂时注释掉services hook，因为还没有创建serviceService
  // const { data: servicesData, isLoading: servicesLoading } = useServices({ size: 5 });

  // 计算总浏览量
  const totalViews = newsData?.items?.reduce((sum, news) => sum + (news.view_count || 0), 0) || 0;

  return (
    <AdminLayout>
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-800">仪表盘</h1>
        <p className="text-gray-600">欢迎回来，{user?.username}！</p>
      </div>

      {/* 统计卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div className="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-gray-500 text-sm">轮播图数量</p>
              <h3 className="text-3xl font-bold text-gray-800 mt-1">
                {bannersLoading ? '...' : bannersData?.total || 0}
              </h3>
              <p className="text-blue-500 text-sm mt-2">
                <i className="fa-solid fa-images mr-1"></i> 首页展示
              </p>
            </div>
            <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
              <i className="fa-solid fa-images text-xl"></i>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-gray-500 text-sm">新闻数量</p>
              <h3 className="text-3xl font-bold text-gray-800 mt-1">
                {newsLoading ? '...' : newsData?.total || 0}
              </h3>
              <p className="text-green-500 text-sm mt-2">
                <i className="fa-solid fa-arrow-up mr-1"></i> 内容管理
              </p>
            </div>
            <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-green-600">
              <i className="fa-solid fa-newspaper text-xl"></i>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-gray-500 text-sm">服务项目</p>
              <h3 className="text-3xl font-bold text-gray-800 mt-1">
                {/* servicesLoading ? '...' : servicesData?.total || */ 8}
              </h3>
              <p className="text-purple-500 text-sm mt-2">
                <i className="fa-solid fa-cogs mr-1"></i> 业务范围
              </p>
            </div>
            <div className="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-600">
              <i className="fa-solid fa-cogs text-xl"></i>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-gray-500 text-sm">总浏览量</p>
              <h3 className="text-3xl font-bold text-gray-800 mt-1">
                {newsLoading ? '...' : totalViews.toLocaleString()}
              </h3>
              <p className="text-orange-500 text-sm mt-2">
                <i className="fa-solid fa-eye mr-1"></i> 新闻浏览
              </p>
            </div>
            <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center text-orange-600">
              <i className="fa-solid fa-eye text-xl"></i>
            </div>
          </div>
        </div>
      </div>
      
      {/* 图表区域 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <div className="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
          <div className="flex items-center justify-between mb-6">
            <h3 className="font-semibold text-gray-800">网站访问统计</h3>
            <div className="text-sm text-gray-500">
              <select className="bg-gray-100 border-none rounded px-2 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500">
                <option>近6个月</option>
                <option>近12个月</option>
                <option>今年</option>
              </select>
            </div>
          </div>
          <div className="h-80 flex flex-col justify-center">
            <div className="space-y-4">
              {visitorData.map((item, index) => (
                <div key={index} className="flex items-center justify-between">
                  <span className="text-sm font-medium text-gray-600 w-12">{item.name}</span>
                  <div className="flex-1 mx-4">
                    <div className="flex items-center space-x-2">
                      <div className="flex-1 bg-gray-200 rounded-full h-2">
                        <div
                          className="bg-blue-500 h-2 rounded-full"
                          style={{ width: `${(item.visitors / 1000) * 100}%` }}
                        ></div>
                      </div>
                      <span className="text-xs text-gray-500 w-16">{item.visitors}人</span>
                    </div>
                    <div className="flex items-center space-x-2 mt-1">
                      <div className="flex-1 bg-gray-200 rounded-full h-2">
                        <div
                          className="bg-blue-300 h-2 rounded-full"
                          style={{ width: `${(item.views / 2500) * 100}%` }}
                        ></div>
                      </div>
                      <span className="text-xs text-gray-500 w-16">{item.views}次</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
            <div className="mt-4 flex items-center justify-center space-x-6 text-sm">
              <div className="flex items-center space-x-2">
                <div className="w-3 h-3 bg-blue-500 rounded"></div>
                <span className="text-gray-600">访问人数</span>
              </div>
              <div className="flex items-center space-x-2">
                <div className="w-3 h-3 bg-blue-300 rounded"></div>
                <span className="text-gray-600">页面浏览量</span>
              </div>
            </div>
          </div>
        </div>
        
        <div className="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
          <div className="flex items-center justify-between mb-6">
            <h3 className="font-semibold text-gray-800">服务项目占比</h3>
            <button className="text-sm text-blue-600 hover:text-blue-800">
              <i className="fa-solid fa-ellipsis-v"></i>
            </button>
          </div>
          <div className="h-80 flex flex-col justify-center">
            <div className="space-y-6">
              {serviceData.map((item, index) => {
                const colors = ['bg-blue-500', 'bg-green-500', 'bg-yellow-500', 'bg-purple-500', 'bg-red-500'];
                const total = serviceData.reduce((sum, data) => sum + data.value, 0);
                const percentage = ((item.value / total) * 100).toFixed(1);

                return (
                  <div key={index} className="flex items-center justify-between">
                    <div className="flex items-center space-x-3">
                      <div className={`w-4 h-4 rounded ${colors[index % colors.length]}`}></div>
                      <span className="text-sm font-medium text-gray-700">{item.name}</span>
                    </div>
                    <div className="flex items-center space-x-3">
                      <div className="w-32 bg-gray-200 rounded-full h-2">
                        <div
                          className={`h-2 rounded-full ${colors[index % colors.length]}`}
                          style={{ width: `${percentage}%` }}
                        ></div>
                      </div>
                      <span className="text-sm text-gray-600 w-12 text-right">{percentage}%</span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
      
      {/* 快速访问 */}
      <div className="bg-white rounded-xl shadow-sm p-6 border border-gray-100 mb-8">
        <h3 className="font-semibold text-gray-800 mb-6">快速访问</h3>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
          {quickAccessItems.map((item, index) => (
            <Link
              key={index}
              to={item.path}
              className="flex flex-col items-center justify-center p-5 border border-gray-100 rounded-lg hover:border-blue-200 hover:bg-blue-50 transition-colors group"
            >
              <div className="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mb-3 group-hover:bg-blue-600 group-hover:text-white transition-colors">
                <i className={`fa-solid ${item.icon} text-xl`}></i>
              </div>
              <span className="text-gray-800 font-medium text-center">{item.title}</span>
              {item.count && (
                <span className="text-xs bg-blue-100 text-blue-600 rounded-full px-2 py-0.5 mt-2">
                  {item.count} 项
                </span>
              )}
            </Link>
          ))}
        </div>
      </div>
      
      {/* 最近更新 */}
      <div className="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
        <div className="flex items-center justify-between mb-6">
          <h3 className="font-semibold text-gray-800">最近新闻</h3>
          <Link to="/admin/news" className="text-sm text-blue-600 hover:text-blue-800">
            查看全部
          </Link>
        </div>

        {newsLoading ? (
          <div className="flex justify-center items-center py-8">
            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
            <span className="ml-2 text-gray-600">加载中...</span>
          </div>
        ) : newsData?.items && newsData.items.length > 0 ? (
          <div className="overflow-x-auto">
            <table className="min-w-full divide-y divide-gray-200">
              <thead>
                <tr>
                  <th className="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">标题</th>
                  <th className="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">分类</th>
                  <th className="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">浏览量</th>
                  <th className="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发布时间</th>
                  <th className="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {newsData.items.map((news) => (
                  <tr key={news.id}>
                    <td className="px-4 py-4">
                      <div className="text-sm font-medium text-gray-900 max-w-xs truncate">
                        {news.title}
                      </div>
                      {news.is_featured && (
                        <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800 mt-1">
                          置顶
                        </span>
                      )}
                    </td>
                    <td className="px-4 py-4 whitespace-nowrap">
                      <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                        {news.category}
                      </span>
                    </td>
                    <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
                      {news.view_count}
                    </td>
                    <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
                      {new Date(news.published_at).toLocaleDateString('zh-CN')}
                    </td>
                    <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
                      <Link
                        to={`/admin/news/${news.id}/edit`}
                        className="text-blue-600 hover:text-blue-900 mr-3"
                      >
                        编辑
                      </Link>
                      <button
                        type="button"
                        className="text-red-600 hover:text-red-900"
                        onClick={() => {
                          if (confirm('确定要删除这篇新闻吗？')) {
                            // TODO: 实现删除功能
                            console.log('删除新闻:', news.id);
                          }
                        }}
                      >
                        删除
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <div className="text-center py-8">
            <i className="fa-solid fa-newspaper text-gray-400 text-4xl mb-4"></i>
            <p className="text-gray-500">暂无新闻数据</p>
            <Link
              to="/admin/news/create"
              className="inline-flex items-center mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
            >
              <i className="fa-solid fa-plus mr-2"></i>
              创建第一篇新闻
            </Link>
          </div>
        )}
      </div>
    </AdminLayout>
  );
}
